<template>
    <div id="v-modal" v-show="show">
        <div id="v-modal-title" class="v-modal-title" v-if="slot">
            <span>{{title}}</span>
            <img src="../assets/images/close.png" @click="cancel()">
        </div>
        <div id="v-modal-body">
          <slot v-if="slot"></slot>
          <p v-if="!slot">{{message}}</p>
        </div>
        <div id="v-modal-footer">
          <button class="v-modal-btn slave" @click="cancel()" v-show="type == 'confirm' || type == 'prompt'">取消</button>
          <button class="v-modal-btn primary" @click="ok()" v-show="type">确定</button>
        </div>
    </div>
</template>

<script>
export default {
  name: "v-modal",
  data() {
     return {
        show: false,
        type: 'confirm', //alert,confirm,dialog
        message: '',
        slot: null,
        title: '',
        callback: null,
    }
  },
  methods: {
    modal: function(message, title) {
        if (typeof message === 'string') {
            this.message = message;
            this.slot = null;
        } else if (typeof message === 'object' && message.slot) {
            this.slot = message.slot;
        }
        this.title = title;
        this.callback = null;
        this.input = '';
        this.show = true;
    },
    modalAlert: function(params) {
        this.type = 'alert';
        this.modal(params.message, params.title == null ? '提示' : params.title);
        this.callback = params.callback;
        this.cancelCallback = params.cancelCallback;
    },
    modalConfirm: function(params) {
        this.type = 'confirm';
        this.modal(params.message, params.title || '确认');
        this.callback = params.callback;
    },
    ok: function() {
        var self = this;
        this.show = false;
        setTimeout(function() {
            if (self.callback) {
                self.callback(self.type == 'prompt' ? self.input : true);
            }
        }, 0);
    },
    cancel: function() {
        var self = this;
        this.show = false;
        setTimeout(function() {
            if (self.cancelCallback) {
                self.cancelCallback(self.type == 'prompt' ? undefined : false);
            }
        }, 0);
    },
    hide: function() {
        this.show = false;
    }
    
  }
};
</script>

<style scoped>
#v-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -520%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 999;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  -o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  -ms-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
#v-modal > div.v-modal-title {
  width: 100%;
  height: 30px;
  background: #ededed;
  position: relative;
}
#v-modal > div.v-modal-title > span{
    display: block;
    width: 300px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin: 0 auto;
    font-size: 18px;
    color: #333;
}
#v-modal > div.v-modal-title > img{
    width: 16px;
    height: 16px;
    position: absolute;
    top: 7px;
    right: 14px;
    cursor: pointer;
}
#v-modal-body > p{
    padding: 30px;
}
#v-modal-footer {
    height: 50px;
    line-height:20px;
/* position: relative; */
    text-align: center;
}

.v-modal-btn {
    width: 60px;
	height: 26px;
	background-color: #ffffff;
	border-radius: 4px;
	border: solid 1px #333333;
    margin-top:10px;
    /*margin-right:25px;*/
}

.v-modal-btn.primary {
  /*color: #63c47d;*/
}

.v-modal-btn.slave {
  color: #666;
  position: relative;
  /*margin-right: 10px;*/
}

.v-modal-btn.slave:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: #dadada;
  transform: scaleX(0.5);
  transform-origin: top right;
}

.v-modal-btn:hover, .v-modal-btn:active {
  background-color: #eeeeee;
}
</style>